<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Modbus Slave数据采集和设备控制</title>
    <style>
        div {
            text-align: center
        }
    </style>
    <script>
        function getData() {
            var rey = document.getElementsByName("ray");
            var acc = document.getElementsByName("acceleration");
            var xhr = new XMLHttpRequest();
            url = "";
            xhr.open("post", url, true);

            xhr.onreadystatechange = function () {

                var data = xhr.responseText;
                console.log("rey:" + data.split("\n")[0].split("：")[1]);
                //var r = "rey:"+data.split("\n")[0].split("：")[1];
                // console.log(r);
                if (xhr.readyState === 4 && xhr.status === 200) {
                    rey[0].value = data.split("\n")[0].split("：")[1];
                    acc[0].value = data.split("\n")[1].split("：")[1];
                    acc[1].value = data.split("\n")[2].split("：")[1];
                    acc[2].value = data.split("\n")[3].split("：")[1];
                }
            }
            xhr.send("get");
        }

        function setLightData(x) {
            var xhr = new XMLHttpRequest();
            url = "";
            xhr.open("post", url, true);



            if (x == 'on')
                xhr.send("set a=0 b=1");
            else
                xhr.send("set a=0 b=0");

        }
        function setBinData(x) {
            var xhr = new XMLHttpRequest();
            url = "";
            xhr.open("post", url, true);



            if (x == 'on')
                xhr.send("set a=1 b=1");
            else
                xhr.send("set a=1 b=0");

        }

    </script>
</head>

<body>
    <div>
        <h1>Modbus Slave数据采集和设备控制</h1>
    </div>
    <div>

        &nbsp;&nbsp;&nbsp;&nbsp;
        光照传感器:<input type="text" placeholder="等待点击获取数据" name="ray" value="">
        <br>
        加速度传感器x:<input type="text" placeholder="等待点击获取数据" name="acceleration">
        <br>
        加速度传感器y:<input type="text" placeholder="等待点击获取数据" name="acceleration">
        <br>
        加速度传感器z:<input type="text" placeholder="等待点击获取数据" name="acceleration">
        <br>
        <button onclick="getData()">获取数据</button>
        <br>
        灯:on<input type="radio" name="switch_light" id="on" onclick="setLightData(id)">
        off<input type="radio" name="switch_light" id="off" onclick="setLightData(id)">
        <br>
        蜂鸣器:on<input type="radio" name="switch_bin" id="on" onclick="setBinData(id)">
        off<input type="radio" name="switch_bin" id="off" onclick="setBinData(id)">
    </div>


</body>

</html>